<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 300px;
            height: 100px;
            /*background-color: #cccccc;*/
            margin: 20px auto;
        }
        #dv input{
            outline: none;
        }
        .lv0{
            height: 5px;
            background-color: white;
            width: 100px;
            border: 1px solid #ccc
        }
        .lv1{
            width: 50px;
            height: 5px;
            background-color: red;
            border: 1px solid ;
        }
        .lv2 {
            width: 100px;
            height: 5px;
            background-color: darkorange;
            border: 1px solid ;
        }
        .lv3{
            width: 150px;
            height: 5px;
            background-color: green;
            border: 1px solid ;
        }
        #all{
            width: 300px;
            height: 400px;
            border-radius: 10px;
            background-color: #cccccc;
            margin: 10px auto;
            line-height: 50px;
            text-align: left;
            padding-left: 20px;
        }
        #all input {
            outline: none;
        }

    </style>
</head>
<body>
    <div id="dv">
        <label for="pwd"> 密码</label>
        <input  id="passwd" type="text" >
        <p>密码强度:</p>
        <div id="str" class="lv0"></div>
    </div>

    <div id="all">
        <labal for="qq">Q Q: </labal><input type="text" id="qq"><span></span><br>
        <labal for="mail">邮箱: </labal><input type="text" id="mail"><span></span><br>
        <labal for="phone">手机: </labal><input type="text" id="phone"><span></span><br>
        <labal for="telephone">座机: </labal><input type="text" id="telephone"><span></span><br>
        <labal for="name">姓名: </labal><input type="text" id="name"><span></span><br>
    </div>
<!--//验证密码强度    -->
<script>
    var reg = function(value){
        var lv = 0;
        // var pwd = document.getElementById("dv").getElementsByTagName("input")[0].value;
        if(/[0-9]/.test(value)){
            lv++;
        }
        if(/[a-zA-Z]/.test(value)){
            lv++;
        }
        if(/[^0-9a-zA-Z]/.test(value)){
            lv++;
        }
        return lv; //最小值是1最大值是3
    };
    document.getElementById("passwd").onkeyup = function(){
        document.getElementById("str").className = "lv"+ (this.value.length >=6?reg(this.value):0);
    }
</script>
<!--组合验证-->
<script>

//使用这种方式写函数要先写函数下面再调用。
    var check = function(value,reg){
        value.onblur = function(){
            if(reg.test(this.value)){
                this.nextElementSibling.innerText = "正确";
                this.nextElementSibling.style.color = "green";
            }else{
                this.nextElementSibling.innerText = "错误";
                this.nextElementSibling.style.color = "red";
            }
        }
    };
    // 验证QQ
    check(document.getElementById("qq"),/^[0-9]{5,13}$/);
    //验证邮箱
    check(document.getElementById("mail"),/^[0-9a-zA-Z._-]+[@][0-9a-zA-Z-_.]+([.][a-zA-Z]+){1,2}$/)
    //验证手机
    check(document.getElementById("phone"),/^[1]([3]|[5-9])[0-9]{9}$/);
    //验证座机
    check(document.getElementById("telephone"),/^[0][0-9]{1,3}[-][0-9]{6,8}$/);
    //验证姓名
    check(document.getElementById("name"),/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/)

</script>
</body>
</html>